<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<!-- DWR -->
		<script src=" <c:url value="/dwr/engine.js" />" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript' src=' <c:url value="/dwr/interface/ChatDWR.js" />'></script>
		<script>
		//server push回來這個method 要抓自己和id的聊天記錄
		dwr.engine.setActiveReverseAjax(true);
		dwr.engine.setNotifyServerOnPageUnload(true);
		function showMessage(msg) 
		{ 
		var temp = '您有來至'+msg+'的訊息';
		$("#msg").html(temp);
		$("#msg").show();
		} 
		function clearmsg(){
			$("#msg").hide();
		}
	</script>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<!-- 圖片區 -->
		<script type="text/javascript" src="index/imagesloaded.pkgd.min.js"></script>
		<link rel="stylesheet" href="index/normalize.css">
		<link rel="stylesheet" href="index/main.css">
		<script src="index/analytics.js"></script>
		<script src="index/modernizr.custom.min.js"></script>
		<script src="index/masonry.pkgd.min.js"></script>
		<script src="index/main.js"></script>		
		<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		ga('create', 'UA-1383589-5', 'shiftbrain.co.jp');
		ga('send', 'pageview');
		</script>
		<!-- 圖片區 -->
		<style>
		a{color:#E16900;text-decoration:none;}
		</style>
		<!-- fancybox -->
		<script>
			$(window).load(function() {
				$(function(){
				    $('.fancybox').fancybox();
				});
			});
		</script>
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.mousewheel-3.0.6.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/jquery.fancybox.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.fancybox.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-buttons.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-buttons.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-thumbs.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-thumbs.js" />"></script>
		<!-- fancybox -->
		<script type="text/javascript" src="js/index.js"></script>
</head>
<body style="background-color:#1C1C1C">

		 <!-- 頭頂 -->
		 <header class="page-header" >
         <div class="inner clearfix">
         <h1 class="site-logo"><img src="index/imgs/images.jpg" style="height:60px" ><img src="index/imgs/logo.png" ></h1>
		 <!-- 頭頂 -->         
         <!-- menu 登入前 -->
          <c:if test="${empty user}"> 
        <div style="float:left;margin-left:150px">
        	<span style="font-weight: bold;font-size: 130%;font-family: Microsoft JhengHei;"><a class="fancybox"  href="#Showlogin">個人MYPAGE</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a class="fancybox"  href="#Showlogin">聊天CHAT</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a class="fancybox"  href="#Showlogin">商城MARKET</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a class="fancybox"  href="#Showlogin">旅遊MAP</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a class="fancybox"  href="#Showlogin">配對MATCH</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a class="fancybox"  href="#Showlogin">運勢Tarot</a></span>
        </div>
        </c:if>
        <!-- menu  登入前-->
        <!-- menu 登入後 -->
         <c:if test="${not empty user}"> 
        <div style="float:left;margin-left:150px">
        	<span style="font-weight: bold;font-size: 130%;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/MypageServlet.controller?account=${user.account}" />">個人MYPAGE</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/ChatServlet.controller?fromacc=${user.account }" />">聊天CHAT</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/SendGiftServlet.controller" />">商城MARKET</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/MapServlet.controller" />">旅遊MAP</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/Match.jsp" />">配對MATCH</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/TarotServlet.controller?account=${user.account }" />">運勢Tarot</a></span>
        </div>
        </c:if>
        <!-- menu  登入後-->
        
        <!-- 登入後的效果-->
        <c:if test="${not empty user}"> 
        <div style="right:70px;position: absolute; top: 0px;">
        	<img src="data:${userpic}" width="50px" height="50px">
        	<span>${user.account}</span><br>
        	<span id="msg" style="color: red;display:none" onclick="clearmsg();"></span>
        </div>
        <div style="right:0px;position: absolute; top: 0px;">
        	<span><a href="<c:url value="/LogoutServlet.controller"/>">登出</a></span>
        </div>
        </c:if>
         <!-- 登入後的效果-->
        <!-- 登入前的效果-->
        <c:if test="${empty user}"> 
        <div style="right:70px;position: absolute; top: 0px;">
        	<img src="index/imgs/login.jpg"  height="40px">
        	<span><a class="fancybox"  href="#Showlogin">登入</a></span>
        	<span><a href="member.jsp">註冊</a></span>
        </div>
		</c:if>
        <!-- 登入前的效果-->
        
    </div>
</header>
	<!-- 頭頂 -->
	
	<!-- 圖片區 -->
	<div class="page-main">
    <ul class="gallery" id="gallery" style="position: relative; height: 2430px;">

    </ul>
	</div>
	<!-- 圖片區 -->
	
	<!-- hidden -->
		<div style="display:none">
		
		<div id="Showlogin">
		<script type="text/javascript">
		//點驗證碼圖片可以更換新的一組驗證碼
		function getSecureNumber(){ 
	 	$('#securenumber').attr("src","<c:url value='/SecurePic.controller'/>");
		 }</script>
			<table>
			<tr>
				<td>ID : </td>
				<td><input type="text" id="account" name="account" value="${account}"></td>
			</tr>
			<tr>
				<td>PWD : </td>
				<td><input type="password" id="password" name="password" value="${password}"></td>
			</tr>
			<tr>
				<td><img id="securenumber" src="<c:url value='/SecurePic.controller' />"  onclick="getSecureNumber()"/></td>
				<td><input type="text" id="securepassword" ></td>
			</tr>
			<tr>
				<td>　</td>
				<td id="error"></td>
			</tr>
			<tr>
				<td>　</td>
				<td align="right"><input type="submit" value="登入" onclick="login();"></td>
			</tr>
			</table>
		</div>
		
		</div>
		<!-- hidden -->
	
</body>
</html>